<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城站专题右侧组件测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #1a1a1a;
            color: white;
            font-family: Arial, sans-serif;
        }
        .test-container {
            width: 500px;
            height: 1060px;
            border: 2px solid #333;
            margin: 0 auto;
        }
        .test-title {
            text-align: center;
            margin-bottom: 20px;
            color: #1AD7FF;
        }
    </style>
</head>
<body>
    <h1 class="test-title">城站专题右侧组件测试</h1>
    <div class="test-container" id="app"></div>

    <!-- 引入构建后的组件库 -->
    <script src="dist/HzdzCharts.js"></script>
    <link rel="stylesheet" href="dist/HzdzCharts.css">
    
    <script>
        // 等待组件库加载完成
        window.addEventListener('load', function() {
            if (window.HzdzCharts && window.HzdzCharts.CityStationRightPanel) {
                console.log('组件库加载成功');
                
                // 创建组件实例
                const CityStationRightPanel = window.HzdzCharts.CityStationRightPanel;
                
                // 渲染组件
                const app = document.getElementById('app');
                const component = React.createElement(CityStationRightPanel, {
                    width: 500,
                    height: 1060,
                    noResponsiveScale: true,
                    trafficFlowPrediction: {
                        statusBar: {
                            title: '流量预测',
                            subtitle: 'TRAFFIC PREDICTION'
                        },
                        dataStats: {
                            mainValue: { 
                                text: '35.19',
                                fontSize: 28, 
                                color: '#1AD7FF',            
                                fontFamily: 'DINAlternate'
                            },
                            unitConfig: { text: '万' },
                            title: { 
                                text: '铁路到发今日预测客流',
                                fontSize: 16,
                                color: '#FFFFFF'
                            },
                            bottomPanel: {
                                leftText: { 
                                    text: '今日预测客流处于历史',
                                    color: '#FFFFFF'
                                },
                                rightText: { 
                                    text: '第', 
                                    rankNumber: '1148',
                                    color: '#FFFFFF'
                                },
                                backgroundImage: '/static/images/shouye/bj51.png'
                            },
                            backgroundImage: '/static/images/shouye/sjzb.png'
                        },
                        dayChartTitle: {
                            title: '交通日线图'
                        },
                        lineChart: {
                            data: [],
                            config: {
                                smooth: true,
                                point: { size: 3, shape: 'circle' },
                                color: ['#1890ff', '#52c41a', '#faad14']
                            },
                            width: 500,
                            height: 318
                        }
                    },
                    sceneMonitor: {
                        cameras: [
                            { id: '1', name: '监控1', isActive: true, hasSignal: true },
                            { id: '2', name: '监控2', isActive: false, hasSignal: true },
                            { id: '3', name: '监控3', isActive: false, hasSignal: false },
                            { id: '4', name: '监控4', isActive: false, hasSignal: true }
                        ],
                        mainBackgroundImage: 'http://localhost:8085/static/images/changjingjiankong/bz44.png',
                        cameraButtonBackground: 'rgba(36,48,62,0.57)',
                        cameraButtonBorder: '#266FA6',
                        cameraTextColor: 'rgba(255,255,255,0.9)',
                        signalIndicatorColor: '#FFFFFF',
                        signalGlowColor: '#0085FF',
                        showSignalIndicator: true,
                        buttonSpacing: 12,
                        theme: 'dark'
                    }
                });
                
                ReactDOM.render(component, app);
                console.log('组件渲染成功');
            } else {
                console.error('组件库加载失败或组件不存在');
                document.getElementById('app').innerHTML = '<p style="color: red;">组件库加载失败</p>';
            }
        });
    </script>
</body>
</html>
